<template>
    <div class="submitOrder">
        <!--<pre v-text="$attrs"/>-->
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span>订单管理</span>
        </div>
      <el-table :data="goods" height="500">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column label="图片" width="100">
          <template slot-scope="scope">
            <img :src="scope.row.imgAddr" style="width:100%"/>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="商品名称" width="300">
        </el-table-column>
        <el-table-column prop="num" label="数量" width="100">
        </el-table-column>
        <el-table-column prop="price" label="单价">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="200">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, goods)"
              type="text"
              size="small">
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

        <el-divider></el-divider>
        <el-row>
          <el-col :span="10" :offset="15">
            <a class="totalMoney">合计¥{{sumPrice}}元</a>
            <el-button type="danger">删除</el-button>
            <el-button type="primary">提交订单</el-button>
          </el-col>
        </el-row>

      </el-card>
    </div>
</template>

<style>
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
  .box-card{
    width:70%;
    margin:60px auto;
  }
  .totalMoney{
    margin-right:20px;
    font-weight:bold;
    color:#38f;
  }
</style>

<script>
  export default {
    data() {

      return {
        currentDate: new Date(),
        goods:[
          {
            name:"一加手机",
            imgAddr:require('static/img/oneplus.jpg'),
            num:1,
            price:2999,
          },{
            name:"小米笔记本",
            imgAddr:require('static/img/mi.jpg'),
            num:1,
            price:7999,
          }
        ]
      };
    },
    methods:{
      deleteRow:function(index,goods){
        goods.splice(index,1);
      },

    },
    computed:{
      sumPrice:function(){
        let sum=0;
        let goods = this.goods;
        for(var i=0;i<goods.length;i++){
          let good = goods[i];
          sum += good.price*good.num;
        }
        return sum;
      }
    }
  }
</script>
